<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo4</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <Style>
        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        li a {
            width: 150px;
            height: 50px;
            line-height: 50px;

            text-align: center;
            float: left;
            background: #63687a;
            color: white;
            margin: 20px;
            border: 2px solid #5454ab;
        }

        ul:nth-of-type(1) li {
            background: #63687a;
            color: white;
        }

        .a, a:hover {
            background: white;
            color: #514f4d;
        }

    </Style>
</head>
<body>
<div id="root">
    <ul>
        <li v-for="names in name">
            <a onclick="overA(this)">{{names}}</a>
        </li>
    </ul>

</div>
<script>

    new Vue({
        el: "#root",
        data: {
            name: ["作品", "动态", "相册", "出版", "拍卖", "文章", "视频"]
        }
    })

    let aA = document.getElementsByTagName("a");
    aA[0].className = "a"

    function overA(newClass) {
        newClass.className = "a";

        for (let i = 0; i < aA.length; i++) {
            if (aA[i] !== newClass) {
                aA[i].className = "";
            }
        }
    }

</script>
</body>
</html>